<template>
  <div class="DetailPosition">
    <DetailSlot title="位置周边">
      <template #default>
        <div class="map" ref="mapRef" style="height: 250px;"></div>
      </template>
    </DetailSlot>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import DetailSlot from '../../../components/DetailSlot/DetailSlot.vue'

const props = defineProps({
  positionModule: {
    type: Object,
    default: () => ({})
  }
})

// 获取DOM
const mapRef = ref()
onMounted(() => {
  // 创建map实例
  const map = new BMapGL.Map(mapRef.value);
  // const point = new BMapGL.Point(116.404, 39.915);
  const point = new BMapGL.Point(props.positionModule.longitude, props.positionModule.latitude);
  const marker = new BMapGL.Marker(point);        // 创建标注   
  map.addOverlay(marker);                     // 将标注添加到地图中
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
})
</script>

<style scoped lang="less"></style>
